<template>
  <div class="page-container serve-tool-detail">
    <div class="f-r a-c j-b" style="width: 100%;margin-bottom: 20px">
      <Breadcrumb />
      <el-button @click="back"><i class="el-icon-arrow-left" />返回</el-button>
    </div>
    <div v-if="isAudit" class="step">
      <el-steps :active="1" align-center>
        <el-step v-for="(node,index) in nodeList" :key="node.id" :title="`${index + 1}、${node.name}`">
          <template slot="icon">
            <div class="step02" :style="{backgroundImage: `url(${node.icon})`}" />
          </template>
        </el-step>
      </el-steps>
    </div>
    <el-card shadow="none" style="margin: 20px 0">
      <h2>基本信息</h2>
      <div class="ctable-box">
        <table>
          <tr v-for="(row,rowIndex) in rowList" :key="rowIndex">
            <td
              v-for="(col,colIndex) in row"
              :key="colIndex"
              :class="[colIndex % 2 === 1 ? 'table_td' : 'tool_baco']"
              :colspan="col.colspan"
            >{{ col.name }}</td>
          </tr>
        </table>
      </div>
      <div class="ctable-box">
        <table style="margin-top: 60px">
          <tr>
            <td class="tool_baco" colspan="1" style="padding-left: 85px;text-align: left">附件类型</td>
            <td colspan="1" class="tool_baco" style="padding-left: 85px;text-align: left">
              附件名称
            </td>
          </tr>
          <tr v-for="(item,index) in detail.files" :key="index">
            <td class="table_td" style="padding-left: 85px;text-align: left">{{ item.name }}</td>
            <td class="table_td" style="padding-left: 85px;text-align: left">
              <el-link>
                <a :href="item.path" />
              </el-link>
            </td>
          </tr>
        </table>
      </div>
    </el-card>
    <el-card v-show="detail.type === 'database'" shadow="none" style="margin: 20px 0">
      <h2>指标信息</h2>
      <el-table
        ref="multipleTable"
        border
        :data="databaseTableFieldList"
      >
        <el-table-column type="selection" width="50px" :selectable="() => false" />
        <el-table-column prop="name" label="指标名称" />
        <el-table-column prop="code" label="英文名称" />
        <el-table-column prop="pk" label="主键">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.pk" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="pk" label="可为空">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.empty" disabled />
          </template>
        </el-table-column>
        <el-table-column prop="length" label="长度" />
        <el-table-column prop="comment" label="注释" />
        <el-table-column prop="type" label="类型" min-width="100">
          <template slot-scope="scope">
            <el-select v-model="scope.row.type" disabled>
              <el-option
                v-for="item in api_param_data_type"
                :key="item.code"
                :value="item.code"
                :label="item.name"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card v-if="isSub" shadow="none" style="margin: 20px 0">
      <h2>订阅申请信息</h2>
      <div class="ctable-box">
        <table>
          <tr>
            <td class="tool_baco" colspan="1">申请人</td>
            <td colspan="1" class="table_td">
              {{ subDetail.createName }}
            </td>
            <td class="tool_baco" colspan="1">申请部门</td>
            <td colspan="1" class="table_td">
              {{ subDetail.createDeptName }}
            </td>
          </tr>
          <tr>
            <td class="tool_baco" colspan="1">申请方联系方式</td>
            <td colspan="1" class="table_td"> {{ subDetail.phone }}</td>

            <td class="tool_baco" colspan="1">申请方地址</td>
            <td colspan="1" class="table_td"> {{ subDetail.address }}</td>
          </tr>
          <tr v-for="(row,rowIndex) in rowList2" :key="rowIndex">
            <td
              v-for="(col,colIndex) in row"
              :key="colIndex"
              :class="[colIndex % 2 === 1 ? 'table_td' : 'tool_baco']"
              :colspan="col.colspan"
            >{{ col.name }}</td>
          </tr>
        </table></div>
    </el-card>
    <el-card v-if="isAudit" shadow="none">
      <h2>处理流程</h2>
      <el-table border :data="tableData">
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          align="center"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { http_serve_audit_process, http_serve_publish_data, http_serve_sub_server } from '@/api'
import Breadcrumb from '@/components/Breadcrumb'
import { mapGetters } from 'vuex'
import { dict_openTypeList, dict_shareNatureList, dict_shareTypeList } from '@/dict'
export default {
  name: 'Detail',
  components: { Breadcrumb },
  data() {
    return {
      safetyArea: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      requiredLicense: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      needDispatch: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      shareNatureList: dict_shareNatureList,
      reportProvince: [
        { value: true, name: '是' },
        { value: false, name: '否' }
      ],
      openTypeList: dict_openTypeList,
      openCondition: [
        { value: true, name: '全部开放' },
        { value: false, name: '部分开放' }
      ],
      shareTypeList: dict_shareTypeList,
      nodeList: [],
      detail: {},
      subDetail: {
        applyInfo: {}
      }, // 订阅详情
      tableData: [],
      columns: [
        { prop: 'createName', label: '处理人' },
        { prop: 'createDeptName', label: '处理部门' },
        { prop: 'auditNodeName', label: '处理节点名称' },
        { prop: 'updateTime', label: '操作时间' }
      ],
      databaseTableFieldList: [],
      isAudit: false, // 是否审核
      isSub: false, // 是否订阅
      rowList: [

      ],
      rowList2: [

      ]
    }
  },
  async mounted() {
    const { id, auditId, type } = this.$route.params
    const res = await http_serve_publish_data.read({ id })
    const data = res || {}
    if (!data.files) {
      data.files = []
    }
    this.detail = data
    if (res.type === 'database') {
      this.rowList = [
        [
          { name: '资源名称', colspan: '1' },
          { name: res.name, colspan: '1' },
          { name: '资源属性分类', colspan: '1' },
          { name: this.getName(this.resource_attribute_type, res.attributeType), colspan: '1' }
        ],
        [
          { name: '资源类型', colspan: '1' },
          { name: res.type === 'database' ? '库表' : '接口', colspan: '3' }
        ],
        [
          { name: '资源介绍', colspan: '1' },
          { name: res.itselfDesc, colspan: '3' }
        ],
        [
          { name: '资源存储格式', colspan: '1' },
          { name: '资源存储格式', colspan: '3' }
        ],
        [
          { name: '资源标签', colspan: '1' },
          { name: res.labels, colspan: '3' }
        ],
        [
          { name: '单位', colspan: '1' },
          { name: res.ownerInfo.org, colspan: '1' },
          { name: '联系人', colspan: '1' },
          { name: res.ownerInfo.name, colspan: '1' }
        ],
        [
          { name: '联系方式', colspan: '1' },
          { name: res.ownerInfo.phone, colspan: '1' },
          { name: '邮件', colspan: '1' },
          { name: res.ownerInfo.email, colspan: '1' }
        ],
        [
          { name: '关联系统', colspan: '1' },
          { name: this.getName(this.relation_system, res.cohereSystem, true), colspan: '3' }
        ],
        [
          { name: '更新频率', colspan: '1' },
          { name: this.getName(this.update_frequency, res.updateFreq), colspan: '1' },
          { name: '安全区开放', colspan: '1' },
          { name: res.safetyArea ? '是' : '否', colspan: '1' }
        ],
        [

          { name: '开放类型', colspan: '1' },
          { name: this.getName(this.openTypeList, res.openType), colspan: '1' },
          { name: '开放条件', colspan: '1' },
          { name: this.getName(this.openCondition, res.openCondition), colspan: '1' }
        ],
        [
          { name: '共享类型', colspan: '1' },
          { name: this.getName(this.shareTypeList, res.shareType), colspan: '1' },
          { name: '是否上报省平台', colspan: '1' },
          { name: res.reportProvince ? '是' : '否', colspan: '1' }
        ],
        [
          { name: '时间范围', colspan: '1' },
          { name: res.timeRangeStart + '-' + res.timeRangeEnd, colspan: '3' }
        ],
        [
          { name: '数据范围', colspan: '1' },
          { name: this.getName(this.data_range, res.dataRange), colspan: '3' }
        ],
        [
          { name: '数据分级', colspan: '1' },
          { name: this.getName(this.data_classification, res.dataClassification), colspan: '3' }
        ],
        [
          { name: '应用场景', colspan: '1' },
          { name: this.getName(this.application_scenario, res.applicationScenario), colspan: '1' },
          { name: '提供渠道', colspan: '1' },
          { name: this.getName(this.provide_channels, res.provideChannels), colspan: '1' }
        ],
        [
          { name: '所属区域', colspan: '1' },
          { name: this.getName(this.realm, res.realm), colspan: '1' },
          { name: '电子证件照', colspan: '1' },
          { name: this.getName(this.requiredLicense, res.requiredLicense), colspan: '1' }
        ],
        [
          { name: '生成目录性质', colspan: '1' },
          { name: this.getName(this.shareNatureList, res.shareNature), colspan: '3' }
        ]
      ]
      this.databaseTableFieldList = res.info.fields || []
    } else if (res.type === 'api') {
      this.rowList = [
        [
          { name: '资源名称', colspan: '1' },
          { name: res.name, colspan: '1' },
          { name: '资源属性分类', colspan: '1' },
          { name: this.getName(this.resource_attribute_type, res.attributeType), colspan: '1' }
        ],
        [
          { name: '资源类型', colspan: '1' },
          { name: res.type === 'database' ? '库表' : '接口', colspan: '3' }
        ],
        [
          { name: '资源介绍', colspan: '1' },
          { name: res.itselfDesc, colspan: '3' }
        ],
        [
          { name: '资源存储格式', colspan: '1' },
          { name: '资源存储格式', colspan: '3' }
        ],
        [
          { name: '资源标签', colspan: '1' },
          { name: res.labels, colspan: '3' }
        ],
        [
          { name: '单位', colspan: '1' },
          { name: res.ownerInfo.org, colspan: '1' },
          { name: '联系人', colspan: '1' },
          { name: res.ownerInfo.name, colspan: '1' }
        ],
        [
          { name: '联系方式', colspan: '1' },
          { name: res.ownerInfo.phone, colspan: '1' },
          { name: '邮件', colspan: '1' },
          { name: res.ownerInfo.email, colspan: '1' }
        ],
        [
          { name: '关联系统', colspan: '1' },
          { name: this.getName(this.relation_system, res.cohereSystem, true), colspan: '3' }
        ],
        [
          { name: '更新频率', colspan: '1' },
          { name: this.getName(this.update_frequency, res.updateFreq), colspan: '1' },
          { name: '安全区开放', colspan: '1' },
          { name: res.safetyArea ? '是' : '否', colspan: '1' }
        ],
        [

          { name: '开放类型', colspan: '1' },
          { name: this.getName(this.openTypeList, res.openType), colspan: '1' },
          { name: '开放条件', colspan: '1' },
          { name: this.getName(this.openCondition, res.openCondition), colspan: '1' }
        ],
        [
          { name: '共享类型', colspan: '1' },
          { name: this.getName(this.shareTypeList, res.shareType), colspan: '1' },
          { name: '是否上报省平台', colspan: '1' },
          { name: res.reportProvince ? '是' : '否', colspan: '1' }
        ],
        [
          { name: '时间范围', colspan: '1' },
          { name: res.timeRangeStart + '-' + res.timeRangeEnd, colspan: '3' }
        ],
        [
          { name: '数据范围', colspan: '1' },
          { name: this.getName(this.data_range, res.dataRange), colspan: '3' }
        ],
        [
          { name: '数据分级', colspan: '1' },
          { name: this.getName(this.data_classification, res.dataClassification), colspan: '3' }
        ],
        [
          { name: '应用场景', colspan: '1' },
          { name: this.getName(this.application_scenario, res.applicationScenario), colspan: '1' },
          { name: '提供渠道', colspan: '1' },
          { name: this.getName(this.provide_channels, res.provideChannels), colspan: '1' }
        ],
        [
          { name: '所属区域', colspan: '1' },
          { name: this.getName(this.realm, res.realm), colspan: '1' },
          { name: '电子证件照', colspan: '1' },
          { name: this.getName(this.requiredLicense, res.requiredLicense), colspan: '1' }
        ],
        [
          { name: '生成目录性质', colspan: '1' },
          { name: this.getName(this.shareNatureList, res.shareNature), colspan: '3' }
        ]
      ]
    }
    // 订阅详情
    if (type === 'sub') {
      this.isSub = true
      http_serve_sub_server.read({ subId: id }).then(res => {
        if (!res.applyInfo) {
          res.applyInfo = {}
        }
        this.subDetail = res
        this.rowList2 = [
          [
            { name: '应用系统', colspan: '1' },
            { name: this.getName(this.relation_system, res.applyInfo.applicationSystems, true), colspan: '1' },
            { name: '业务用途', colspan: '1' },
            { name: res.businessPurpose, colspan: '1' }
          ],
          [
            { name: '预期应用成效', colspan: '1' },
            { name: res.expectApplicationEffect, colspan: '1' },
            { name: '使用截止日期', colspan: '1' },
            { name: res.useEndTime, colspan: '1' }
          ],
          [
            { name: '申请原因', colspan: '1' },
            { name: res.reason, colspan: '3' }
          ]
        ]
        this.$nextTick(() => {
          res.applyInfo.fieldCodes.forEach(code => {
            this.$refs.multipleTable.toggleRowSelection(this.databaseTableFieldList.find(v => v.code === code), true)
          })
        })
      })
    }
    // 审核详情
    if (auditId) {
      this.isAudit = true
      // 审核相关
      http_serve_audit_process.nodeList({
        id: auditId
      }).then(res => {
        this.nodeList = res
      })
      http_serve_audit_process.list({ id: auditId }).then(res => {
        this.tableData = res
      })
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    getName(list, code, mult) {
      if (!list) return code
      if (mult) {
        const _list = code.map(v => {
          const find = list.find(el => el.code === v || el.value === v)
          if (find) {
            return find.name
          }
          return v
        })
        return _list.join(',')
      }
      const find = list.find(el => el.code === code || el.value === code)
      return find ? find.name : code
    }
  },
  computed: {
    ...mapGetters(['dict', 'userInfo']),
    resource_attribute_type() {
      return this.dict['resource_attribute_type'] || []
    },
    resource_storage_format() {
      return this.dict['resource_storage_format'] || []
    },
    resource_tag() {
      return this.dict['resource_tag'] || []
    },
    relation_system() {
      return this.dict['relation_system'] || []
    },
    data_range() {
      return this.dict['data_range'] || []
    },
    data_classification() {
      return this.dict['data_classification'] || []
    },
    application_scenario() {
      return this.dict['application_scenario'] || []
    },
    provide_channels() {
      return this.dict['provide_channels'] || []
    },
    realm() {
      return this.dict['realm'] || []
    },
    update_frequency() {
      return this.dict['update_frequency'] || []
    },
    provincial_platform_matters() {
      return this.dict['provincial_platform_matters'] || []
    },
    city_platform_matters() {
      return this.dict['city_platform_matters'] || []
    },
    api_param_data_type() {
      return this.dict['api_param_data_type'] || []
    }
  }
}
</script>

<style lang="scss">
.serve-tool-detail{
  width: 1400px;
  margin: 0 auto;
  .ctable-box {
    table {
      width: 100%;
      border-spacing: 0px;
      border: 1px solid #E5E9F2;
      border-collapse: collapse;
    }
    tr {
      height: 60px;
      border: 1px solid #E5E9F2;
    }
    .tool_baco {
      background: #f9faff;
      width: 200px;
      color: #333333;
    }
    td {
      overflow: hidden;
      color: #333333;
      border: 1px solid #E5E9F2;
      line-height: 36px;
      font-size: 18px;
      padding-left: 45px;
      text-align: left
    }
    .table_td {
      padding-left: 10px;
      color: #333333;
    }
  }

  .step {
    height: 200px;
    padding-top: 80px;
    background: #ffffff;
    .detail {

    }
    .step02 {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background-size: 100% 100%;
    }
  }
  .step {
    .el-steps{
      width: 100%;
      .el-step__icon.is-text {
        width: 100%;
        border: none;
      }
      .el-step__title {
        height: 16px;
        line-height: 16px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #333333;
      }
      .el-step__line {
        background-color: transparent;
        border-top: 3px dashed;
      }
    }
  }
}
</style>
